<template>
  <div class="login-container">
    <div class="login-left"></div>
    <div class="login-right">
      <div class="login-right-inner">
        <div class="welcome">
          <div class="welcome-title">Sign Up</div>
        </div>
        <!-- 登录表单 -->
        <!-- class="login-form" -->
        <el-form
          ref="loginFormRef"
          :model="loginData"
          :rules="loginRules"
          label-position="top"
        >
          <!-- 用户名 -->

          <el-form-item prop="username" label="">
            <div
              class="flex-y-center w-full bg-[#f2f3f5] border-rd-8px border-[1px_solid_#EBEDF0]"
            >
              <svg-icon icon-class="user" class="mx-4" />
              <el-input
                ref="username"
                v-model="loginData.username"
                :placeholder="$t('login.username')"
                name="username"
                size="large"
                class="h-[48px] pl-3.5 line"
              />
            </div>
          </el-form-item>

          <!-- 密码 -->
          <el-tooltip
            :visible="isCapslock"
            :content="$t('login.capsLock')"
            placement="right"
          >
            <el-form-item prop="password" label="">
              <div
                class="flex-y-center w-full bg-[#f2f3f5] border-rd-8px border-[1px_solid_#EBEDF0]"
              >
                <svg-icon icon-class="lock" class="mx-4" />
                <el-input
                  v-model="loginData.password"
                  :placeholder="$t('login.password')"
                  type="password"
                  name="password"
                  @keyup="checkCapslock"
                  @keyup.enter="handleLogin"
                  size="large"
                  class="h-[48px] pr-2 pl-3.5 line"
                  show-password
                />
              </div>
            </el-form-item>
          </el-tooltip>

          <!-- 登录按钮 -->

          <el-button
            :loading="loading"
            type="primary"
            size="large"
            class="h-[48px] w-full bg-[#4E6BEF] hover:bg-[#4E6BEF]"
            @click.prevent="handleLogin"
            >{{ $t("login.login") }}
          </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSettingsStore, useUserStore } from "@/store";
import AuthAPI from "@/api/auth";
import { LoginData } from "@/api/auth/model";
import { Sunny, Moon } from "@element-plus/icons-vue";
import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
import router from "@/router";
import defaultSettings from "@/settings";
import { ThemeEnum } from "@/enums/ThemeEnum";

// Stores
const userStore = useUserStore();
const settingsStore = useSettingsStore();

// Internationalization
const { t } = useI18n();

// Reactive states
const isDark = ref(settingsStore.theme === ThemeEnum.DARK);
const icpVisible = ref(true);
const loading = ref(false); // 按钮loading
const isCapslock = ref(false); // 是否大写锁定
const captchaBase64 = ref(); // 验证码图片Base64字符串
const loginFormRef = ref(ElForm); // 登录表单ref
const { height } = useWindowSize();

const loginData = ref<LoginData>({
  username: "boss",
  password: "123456",
});

const loginRules = computed(() => {
  return {
    username: [
      {
        required: true,
        trigger: "blur",
        message: t("login.message.username.required"),
      },
    ],
    password: [
      {
        required: true,
        trigger: "blur",
        message: t("login.message.password.required"),
      },
      {
        min: 6,
        message: t("login.message.password.min"),
        trigger: "blur",
      },
    ],
  };
});

/** 登录 */
const route = useRoute();
function handleLogin() {
  loginFormRef.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      userStore
        .login(loginData.value)
        .then(() => {
          const query: LocationQuery = route.query;
          const redirect = (query.redirect as LocationQueryValue) ?? "/";
          const otherQueryParams = Object.keys(query).reduce(
            (acc: any, cur: string) => {
              if (cur !== "redirect") {
                acc[cur] = query[cur];
              }
              return acc;
            },
            {}
          );

          router.push({ path: redirect, query: otherQueryParams });
        })
        .catch((error) => {
          ElMessage.error(
            error === "noPermission" ? t("common.noPermission") : error
          );
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
}

/** 主题切换 */
const toggleTheme = () => {
  const newTheme =
    settingsStore.theme === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
  settingsStore.changeTheme(newTheme);
};

/** 根据屏幕宽度切换设备模式 */
watchEffect(() => {
  if (height.value < 600) {
    icpVisible.value = false;
  } else {
    icpVisible.value = true;
  }
});

/** 检查输入大小写 */
function checkCapslock(event: KeyboardEvent) {
  // 防止浏览器密码自动填充时报错
  if (event instanceof KeyboardEvent) {
    isCapslock.value = event.getModifierState("CapsLock");
  }
}

onMounted(() => {});
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  .login-left {
    width: 49%;
    background: #3287eb url("@/assets/images/svg/login-bg.svg") no-repeat center;
    background-size: cover;
  }
  .login-right {
    width: 51%;
    padding: 128px 120px;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .login-right-inner {
      max-width: 540px;
      width: 100%;
    }
    .welcome {
      text-align: center;
      margin-bottom: 32px;
      font-style: normal;
      font-weight: 900;
      line-height: 90px;
      font-size: 64px;
      letter-spacing: 0.2px;
      .welcome-title {
        color: #232323;
      }
    }
  }
}

// .el-form-item {
//   background: var(--el-input-bg-color);
//   border: 1px solid var(--el-border-color);
//   border-radius: 5px;
// }

:deep(.el-input) {
  .el-input__wrapper {
    padding: 0;
    background-color: transparent;
    box-shadow: none;

    &.is-focus,
    &:hover {
      box-shadow: none !important;
    }

    input:-webkit-autofill {
      /* 通过延时渲染背景色变相去除背景颜色 */
      transition: background-color 1000s ease-in-out 0s;
    }
  }
  .el-form-item--default {
    margin-bottom: 24px !important;
  }
}
.line {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 16px;
    background-color: #c8c9cc;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 1200px) {
  .login-container {
    .login-left {
      width: 40%;
    }
    .login-right {
      width: 60%;
      padding: 9% 8%;
      .ogin-right-inner {
        max-width: 500px;
        width: 100%;
      }
    }
  }
}
</style>
